<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="../static/img/logo2.png" type="image/png">
    <link rel="stylesheet" href="../static/css/homepage.css">
    <link rel="stylesheet" href='../static/css/ku/bootstrap.css'>
    <link rel="stylesheet" href="../static/css/daohang.css">
    <script src="../static/js/ku/jquery.min.js"></script>
    <script src="../static/js/ku/bootstrap.js"></script>
    <script src="../static/js/yuyin.js"></script>
    <link rel="stylesheet" href="../static/zahuo/rotate.css">
    <link rel="stylesheet" href="../static/css/lunbo/slideshows.css"/>
    <script>
        $(document).ready(function () {
            function huanxin() {
                startRecording1();
                setTimeout(function () {
                    obtainRecord1('/huanxin/', function (callbackvalue1, e) {
                        if (callbackvalue1 == -1) {
                            $("#tishi1").fadeOut(1000);
                            $("#sikao").fadeOut(1500);
                            $("#tishi").fadeOut(2000);
                            document.getElementById('sirib').style.display = 'block';
                            startRecording();
                            setTimeout(function () {
                                document.getElementById('sirib').style.display = 'none';
                                obtainRecord('/siri/', function (callbackvalue, e) {
                                    if (callbackvalue == 1 || callbackvalue == '1') {
                                        $("#tishi1").fadeOut(1000);
                                        $("#sikao").fadeOut(1500);
                                        $("#tishi").fadeIn(1500);
                                    }
                                    else if (callbackvalue == '正在努力识别......') {
                                        $("#tishi1").fadeOut(1000);
                                        $("#tishi").fadeOut(1500);
                                        $("#sikao").fadeIn(1500);
                                    }
                                    else if (callbackvalue != 'cancel') {
                                        window.location.href = callbackvalue;
                                    }
                                });
                            }, 3 * 1000);
                        }
                    });
                }, 5 * 1000);
            }

            InterValObj = window.setInterval(huanxin, 5000);
            $('#siri').mouseover(function () {
                $("#sikao").fadeOut(1500);
                $("#tishi").fadeOut(2000);
                $("#tishi1").fadeIn(1000);
            });
            $('#siri').mouseout(function () {
                $("#tishi1").fadeOut(1000);
            });
            $('#siri').click(function () {
                $("#tishi1").fadeOut(1000);
                $("#sikao").fadeOut(1500);
                $("#tishi").fadeOut(2000);
                document.getElementById('sirib').style.display = 'block';
                startRecording();
                setTimeout(function () {
                    document.getElementById('sirib').style.display = 'none';
                    obtainRecord('/siri/', function (callbackvalue, e) {
                        if (callbackvalue == 1 || callbackvalue == '1') {
                            $("#tishi1").fadeOut(1000);
                            $("#sikao").fadeOut(1500);
                            $("#tishi").fadeIn(1500);
                        }
                        else if (callbackvalue == '正在努力识别......') {
                            $("#tishi1").fadeOut(1000);
                            $("#tishi").fadeOut(1500);
                            $("#sikao").fadeIn(1500);
                        }
                        else if (callbackvalue != 'cancel') {
                            window.location.href = callbackvalue;
                        }

                    });
                }, 3 * 1000);

            });
            $('#yuyinimg').mousedown(function () {
                img = document.getElementById('yuyinimg');
                img.src = '../static/img/Icon/yuyin.gif';
                startRecording()
            });
            $('#yuyinimg').mouseup(function () {
                img = document.getElementById('yuyinimg');
                img.src = '../static/img/Icon/yuyin.png';
                obtainRecord('/yuyinshibie/', function (callbackvalue, e) {
                    document.getElementById('citySelect').value = callbackvalue
                });
            });
        });
    </script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cla1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <img src="../static/img/logo1.png" alt="">
    <div class="collapse navbar-collapse" id="cla1">
        <ul class="navbar-nav" style="margin: 0 10px 0 auto;">
            <li class="nav-item" style="background: rgb(0,104,183);border-radius: 5px">
                <a class="nav-link" href="/homepage/">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/search/">目的地</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    旅游攻略
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/travels/">游记</a>
                    <a class="dropdown-item" href="/list/">榜单</a>
                    <a class="dropdown-item" href="/recommend/">景点推荐</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    社区
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/qa/">问答</a>
                    <a class="dropdown-item" href="/companions/">结伴</a>
                </div>
            </li>
            {% if request.session.is_login %}     
                <li class="nav-item"><a href="/house/" class="nav-link">{{ request.session.user_name }}</a></li>
                <li class="nav-item"><a href="/logout/" class="nav-link">注销账号</a></li>
            {% else %}
                <li class="nav-item"><a href="/signin/" class="nav-link">登录/注册</a></li>
            {% endif %}
        </ul>
    </div>
</nav>

<div id="tishi1" style="display: none">
    <div><img src="../static/img/Icon/tishi.png" alt="" width="380px"></div>
</div>

<div id="sikao" style="display: none">
    <div><img src="../static/img/Icon/sikao.png" alt="" width="200px"></div>
</div>

<div id="tishi" style="display: none">
    <div><img src="../static/img/Icon/duihua.png" alt="" width="200px"></div>
</div>

<div id="siri">
    <div class="he" id="sirib" style="display: none"></div>
</div>


<div id="demo" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../static/img/beijin2.jpeg">
        </div>
        <div class="carousel-item">
            <img src="../static/img/beijin3.jpeg">
        </div>
        <div class="carousel-item">
            <img src="../static/img/beijin4.jpeg">
        </div>
        <div class="carousel-item">
            <img src="https://p3-q.mafengwo.net/s12/M00/FF/37/wKgED1vJxa-AZPV6AAToDXWc-TQ56.jpeg?imageMogr2%2Finterlace%2F1">
        </div>
    </div>
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
    <div style="position: absolute;left: 50%;top: 80%;transform: translate(-50%, -50%);width: 650px;height:100px;background: rgba(0,0,0,0.3)">
        <div id="shuru">
            <form action="/homepage/" method="post">
                <table style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
                    <tr>
                        <td>
                            <input type="text" class="cityinput" id="citySelect" placeholder="城市名"
                                   style="width: 450px;background: white;font-size: 20px" name="city"></td>
                        <td>
                            <input type="text" name="=type" value="1" style="display: none">
                            <button type="submit" class="btn btn-outline-primary" id="bu12">搜索</button>
                        </td>
                        <td>
                            <img
                                    src="../static/img/Icon/yuyin.png"
                                    alt="" style="height:60px;width:60px" id="yuyinimg">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <script>
            var recorder;
            var recorder1;
            var audio = document.querySelector('audio');

            function startRecording1() {
                HZRecorder.get(function (rec1) {
                    recorder1 = rec1;
                    recorder1.start();
                });
            }

            function obtainRecord1(url, callbake) {
                var record = recorder1.upload(url, callbake)
            };


            function startRecording() {
                HZRecorder.get(function (rec) {
                    recorder = rec;
                    recorder.start();
                });
            }

            function obtainRecord(url, callbake) {
                var record = recorder.upload(url, callbake)
            };

        </script>
    </div>
</div>
<script src="../static/js/ku/jquery.min.js"></script>
<script src="../static/js/homepage.js"></script>
<div class="row">
    <div class="col-md-2 column col-2">
    </div>
    <div class="col-md-8 column col-8" id="div32">
        <h2 style="margin-top: 30px" align="center">诗和远方</h2>
        <div class="row" id="div321">
            {% for view in list %}
                <div class="col-md-4 column">
                    <a href="/region/?data={{ view.city_id }}">
                        <img src="{{ view.city_img_url }}" alt="" width="100%" height="240px">
                        <div style="position: absolute; top: 0; left: 0;width: 100%;text-align: center;font-size: 1vw;color: white">
                            <b>{{ view.city_name }}</b>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-2 column col-2">
    </div>
</div>
<div class="row" style="margin-top: 30px">
    <div class="col-md-2 column col-1">
    </div>
    <div class="col-md-8 column col-10">
        <h2 align="center">让信任和推荐悄然进行</h2>
        <div class="row" style="text-align: center" id="divtui">
            <div class="col-md-4">
                <div>
                <img src="../static/img/Icon/gexinghua.png" alt="" height="90px"><br><span>个性推荐</span>
                </div>
            </div>
            <div class="col-md-4"><img src="../static/img/Icon/jilei.png" alt="" height="90px"><br><span>点评积累</span>
            </div>
            <div class="col-md-4"><img src="../static/img/Icon/ren.png" alt="" height="90px"><br><span>优质用户</span>
            </div>
            <hr>
        </div>
    </div>
    <div class="col-md-2 column col-1">
    </div>
</div>

<div class="row">
    <div class="col-md-2 column col-2">
    </div>
    <div class="col-md-8 column col-8" id="div32">
        <h2 style="margin-top: 20px" align="center"></h2>
        <div class="row" id="div321">
            <div class="col-md-8 column">
                <a href="/scenicspot/?data={{ list1.scenicspot_id }}">
                    <img src="{{ list1.scenicspot_img_url }}" alt="" width="100%" height="440px">
                    <div style="position: absolute; top: 70%; left: 0;width: 100%;text-align: center;font-size: 1.6vw;color: white">
                        <b>{{ list1.scenicspot_name }}</b>
                    </div>
                </a>
            </div>
            <div class="col-md-4 column">
                {% for view in list2 %}
                    <div class="col-md-12" style="margin: 0 0 40px auto;padding: 0">
                        <a href="/scenicspot/?data={{ view.scenicspot_id }}">
                            <img src="{{ view.scenicspot_img_url }}" alt="" width="100%" height="200px" style="padding-left: 0;margin-left: 0">
                            <div style="position: absolute; top: 70%; left: 0;width: 100%;text-align: center;font-size: 1vw;color: white">
                                <b>{{ view.scenicspot_name }}</b>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
            {% for view in list3 %}
                <div class="col-md-4" style="margin-top: 0">
                    <a href="/scenicspot/?data={{ view.scenicspot_id }}">
                        <img src="{{ view.scenicspot_img_url }}" alt="" width="100%" height="200px">
                        <div style="position: absolute; top: 70%; left: 0;width: 100%;text-align: center;font-size: 1vw;color: white">
                            <b>{{ view.scenicspot_name }}</b>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-2 column col-2">
    </div>
</div>
<hr style="margin-bottom: 0;margin-top: 40px">
<div class="row" style="margin-bottom: 0" id="homepagejie1">
    <div class="col-md-2 column col-1">
    </div>
    <div class="col-md-8 column col-10" id="homepagejie2" style="margin-top: 50px">
        <h2 align="center" style="color: white;margin-top: 10px">与你同行，路上才有柔风</h2>
        <h4>有<span style="font-size: 35px">32422</span>用户在此同行</h4>
        <h3>我们共有 <span style="font-size: 40px">2422</span>个结伴</h3>

    </div>
    <div class="col-md-2 column col-1">
    </div>
</div>
<div>
    <a class="to-top" style="z-index: 999"><img src="../static/img/Icon/huidao.png" alt="" width="60px"></a>
    <script>!function (o) {
        "use strict";
        o.fn.toTop = function (t) {
            var i = this, e = o(window), s = o("html, body"),
                n = o.extend({autohide: !0, offset: 420, speed: 500, position: !0, right: 15, bottom: 30}, t);
            i.css({cursor: "pointer"}), n.autohide && i.css("display", "none"), n.position && i.css({
                position: "fixed",
                right: n.right,
                bottom: n.bottom
            }), i.click(function () {
                s.animate({scrollTop: 0}, n.speed)
            }), e.scroll(function () {
                var o = e.scrollTop();
                n.autohide && (o > n.offset ? i.fadeIn(n.speed) : i.fadeOut(n.speed))
            })
        }
    }(jQuery);
    $(function () {
        $('.to-top').toTop();
    });
    </script>
</div>

<div class="container-fluid">
    <div class="row clearfix" style="background:rgb(52,58,64);">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-8 column">
            <div id="fool" style="width: 100%;text-align: center;height: 100px;color: white;">
                <p style="margin-top: 20px">© 2018 meetjinn.com 京ICP备0000000号
                    <img src="http://images.mafengwo.net/images/footer/police_record.png"
                         width="12" style="margin:0 2px 4px 0;">公网安备000000000号<span
                            class="m_l_10">违法和不良信息举报电话: ---------- 举报邮箱 ----------</span></p>
                <p>网络出版服务许可证：----------<span class="m_l_10">增值电信业务经营许可证：京00000000</span> 营业执照帮助中心<span
                        class="m_l_10">觅景客服:</span><span
                        class="highlight">4006-000-000</span>
                </p>
            </div>
        </div>
        <div class="col-md-2 column">
        </div>
    </div>
</div>
</body>
</html>